<template>
	<view class="u-wrap u-p-l-20 u-p-r-20">
		<u-form :model="addModel" ref="form1">
			<u-form-item prop="typeName" label-width="auto" label="举报原因:">
				<u-input @click="openSelect" placeholder="请选择举报原因(必填)" v-model="addModel.typeName" />
				<u-select @confirm="selectConfirm" v-model="show" :list="selectList"></u-select>
			</u-form-item>
			<u-form-item v-if="addModel.categoryId == 9" prop="reason" label-width="auto" label="其他: ">
				<textarea :auto-height="true" maxlength="100" placeholder="请输入其他举报原因"
					v-model="addModel.reason" />
			</u-form-item>
		</u-form>
		<u-button @click="commit" :custom-style="customStyle">举报</u-button>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onReady
	} from '@dcloudio/uni-app'
	import http from '../../common/http.js';
	import {
		JuBaoApi
	} from '../../api/goods.js'
	//表单ref属性
	const form1 = ref()
	// import {
	// 	uploadImageApi
	// } from '../../api/write.js'
	const imgRef = ref()
	const addModel = reactive({
		userId: uni.getStorageSync('userId'),
		goodsId: uni.getStorageSync('goodsId'),
		typeName:'',
		categoryId: '',
		reason:''
	})
	const rules = reactive({ //表单验证规则
		typeName: [{
			required: true,
			message: '请选择分类',
			trigger: ['change', 'blur'],
		}],
	})
	const value = ref('')
	const customStyle = reactive({
		background: '#ff0000',
		color: '#FFF',
		marginTop: '50px',
		width: '100%'
	})
	//分类弹框
	const show = ref(false)
	const selectList = [{
				value: 1,
				label: '涉及政治不实信息'
			},
			{
				value: 2,
				label: '暴力血腥等内容'
			},
			{
				value: 3,
				label: '色情低俗内容'
			},
			{
				value: 4,
				label: '小广告'
			},
			{
				value: 5,
				label: '引战，带节奏'
			},
			{
				value: 6,
				label: '辱骂他人，恶意攻击'
			},
			{
				value: 7,
				label: '发布虚假信息，制造传播谣言'
			},
			{
				value: 8,
				label: '发布的商品信息与实际不符或存在欺诈行为'
			},
			{
				value: 9,
				label: '其他'
			}
		]
	//点击分类事件时打开分类弹框
	const openSelect = () => {
		show.value = true
	}
	//分类确定
	const selectConfirm = (e) => { //将用户所选的商品分类以数组形式存储在e中
		addModel.typeName = e[0].label
		addModel.categoryId = e[0].value
		if(addModel.categoryId != 9){
			addModel.reason = e[0].label;
		} else if (addModel.categoryId == 9){
			addModel.reason = '';
		}
	}
	//发布提交
	const commit = () => {
		form1.value.validate(async (valid) => {
			console.log(valid)
			if (valid) {
				let res = await JuBaoApi(addModel)
				if (res && res.code == 200) {
					console.log(res)
					//清空数据
					form1.value.resetFields()
					//fileList.value = []
				}
			}
		})
		console.log(addModel)
	}
	onReady(() => {
		//设置表单验证规则
		form1.value.setRules(rules);
		console.log(selectList)
	})
</script>

<style>

</style>